[#include "/includes/_layout.html"/]
<title>商品分组管理</title>
[#include "/includes/header.html" /]
<style type="text/css">
.nav-tabs li{width:200px;}
.app-image-list li {
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    float: left;
    height: 40px;
    margin: 0 10px 10px 0;
    position: relative;
    width: 40px;
}
 .app-image-list li a {
    display: block;
    height: 100%;
}
.app-image-list li img {
    height: 100%;
    width: 100%;
}
.app-image-list li .add-goods, .app-image-list li .add {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    line-height: 40px;
    text-align: center;
    width: 100%;
}
.app-image-list li:hover .close-modal {
    display: block;
}
.w30{
background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
width: 50px;
}
.controls{
 margin-left: 160px;
}
</style>
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
[@layout]
<div class="wrapper wrapper-content">
	<div class="row animated fadeInLeft">
	
	[#include "/includes/menu-product.html" /]
	
	<div class="col-sm-11">
	<!-- <div class="row content-tabs">
		<nav class="page-tabs J_menuTabs">
	       <div class="page-tabs-content" style="margin-left: 0px;">
	           <a href="${webctx}/product" class="J_menuTab">商品</a>
		       <a href="${webctx}/category" class="J_menuTab">分类 </a>
		       <a href="${webctx}/group" class="J_menuTab active">分组 </a>
		       <a href="${webctx}/specification" class="J_menuTab">规格 </a>
		       <a href="${webctx}/delivery" class="J_menuTab">运费模板</a>
	       </div>
	   	</nav>
	</div> -->
	
	<div class="ibox float-e-margins">
		<div class="ibox-title row">
			<h5><small><a href="${webctx}/group">《返回列表</a></small></h5>
		</div>
		<div class="row ibox-content active_statistics col-sm-9">
		<form id="groupForm" class="form-horizontal">
		  <div class="form-group">
		  <input type="hidden" name="id" id="id" value="${group.id }"/>
		            <label class="col-md-2 control-label">分组名称<span style="color: red;"><em>*</em></span></label>
		            <div class="col-md-8" id="error_name">
		                <input id="name" name= "name" value="${group.group_name}" maxlength="20" type="text" class="form-control" style="width: 400px" >
		                <label class="control-label" for="name"></label>
		            </div>
		   </div>
		   
		   <ol class="breadcrumb">
					<li><i class="fa fa-home"></i><a href="javascript:selectProduct();">选择分组商品</a></li>
				</ol>
				
			 <div class="panel-body">
                      <table class="table table-striped table-bordered bootstrap-datatable datatable"  border="0" style="width: 80%">
								<thead>
									<tr>
										<th><span style="vertical-align: middle;">&nbsp;&nbsp;商品</span></th>
										<th>价格</th>
										<th>库存</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="seletctProductLotGrid">
								</tbody>
						</table>
			 </div>	
			 
			
			</form>
			 <div class="panel-footer" align="center">
		   	 	<button onclick="savegroup();" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i>提交</button>
			</div>
		</div>
	</div>
	
</div>
	</div>
</div>

<div class="modal fade" id="selectProduct">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">选择分组商品</h4>
			</div>
			<div class="modal-body">    
		       		<div id="myTabContent" class="tab-content">
						<div class="tab-pane active" id="select_items_div">
							<table class="table table-striped table-bordered bootstrap-datatable datatable" id="mainTable" border="0" style="width: 100%">
								<thead>
									<tr>
										<th><input type="checkbox" id="all" title="全选/反选" style="margin-right: 4px; vertical-align: middle;"/></th>
										<th><span style="vertical-align: middle;">&nbsp;&nbsp;商品</span></th>
										<th>价格</th>
										<th>库存</th>
										<!-- <th>操作</th> -->
									</tr>
								</thead>
								<tbody class="productLotGrid">
								</tbody>
							</table>
							<div id="productToolsbar" class="panel-body">
								<div id="pager" class="jqpager" style="margin-bottom: 1px;float: right;"></div>
							</div>
						</div>
					</div>
			</div>
			<div class="modal-footer" >
			<div  style="display: block;" align="center">
				<button id="selectAllProduct" type="button" class="btn btn-sm btn-primary">确      定</button>	
			</div>	
        	</div>
		</div>
	</div>
	
	</div>

<script type="text/javascript">

function savegroup(){
	var params = {}, error = {};	
	var groupId = $("#id").val(),name = $("#name").val();
	if(groupId!=null && groupId!="") params.id = groupId;
	if($.trim(name) =="") {error.error_name = "分组名称不能为空"; } else {error.error_name=""; params.group_name = $.trim(name);}
	var hasError = false;
	for(var key in error){
		if(error[key]!=""){
			if(!hasError) hasError = true;
			$("#"+key).addClass("has-error");
			$("#"+key).find("label").text(error[key]);
		}else{
			$("#"+key).removeClass("has-error");
			$("#"+key).find("label").empty();
		}
	}
	//主表信息不完整，返回
	if(hasError) return false;
	if($(".seletctProductLotGrid").find("tr").length<=0){
		obz.warn("请选择商品");
		return false;
	}else{
		var productIds="";
		$(".seletctProductLotGrid").find("tr").each(function(){
			productIds=productIds+$(this).attr("id")+",";
		});
		params.product_ids=productIds;
	}
	$(".float-e-margins").mask("正在提交数据...");
	$.post(obz.ctx+"/group/save", params, function(resp) {
		if(resp.code != 200){
			obz.error(resp.msg);
			return;
		}
		obz.msg("保存成功", function(){
			$(".float-e-margins").unmask();
			location.href = obz.ctx + "/group";
		});
	});
}
//列出商品
function selectProduct(){
	 $("#selectProduct").modal("show");
}

function bindSetTableAEvent(){
	//注册取消返现商品事件
	$(".seletctProductLotGrid").find("tr a").each(function(){
		$(this).unbind("click");
		$(this).click(function(){
			var me = $(this);
			//取消设置不能直接删除该行，需要隐藏
			//me.parent().parent().attr("opt", "del");
			me.parent().parent().remove();
			$("#checkbox_"+me.attr("id")).attr("checked", false);
			//$("#_sel_total_item").html(parseInt(TBatch.getCheckedCount()) + parseInt($("#_sel_total_item").text()));
			//添加到可选商品列表
			return false;
		});
	});
}

$(document).ready(function(){
	bindSetTableAEvent();
	var productIds = "";
	[#if groupProducts??]
		[#list groupProducts as prod]
			productIds += '${prod.product_id}' + "-";
		[/#list]
	[/#if]
	if(productIds!=null&&productIds!=""){
		getProducts(productIds);
	}
	$("#selectAllProduct").click(function(){
		if(TBatch.getCheckedCount() <=0){
			obz.showMessage("请选择商品!");
			return false;
		}else{
			 $("#selectProduct").modal("hide");	
			 var product_ids=TBatch.getChecked();
				product_ids=product_ids.substring(0,product_ids.length-1);
				var ids="";
				var item=product_ids.split("-");
				for (var i = 0; i < item.length; i++) {
					if($(".seletctProductLotGrid").find("tr").length>0){
					var isExist = false;
					$(".seletctProductLotGrid").find("tr").each(function(){
						var productIds=$(this).attr("id");
							if(productIds==item[i]){
								 isExist = true;
						         return false;
							}
					});
					 if(!isExist){
						 ids=ids+item[i]+"-";
					    }
					}else{
							ids=ids+item[i]+"-";
						}	
				}
				getProducts(ids);
		}
		
	});
});

 var getProducts = function(productIds){
	var params = {};
	params.productIds=productIds;
	$("#mainTable").mask("加载中...");
	var url = obz.ctx + "/cashback/listSelectProduct";
	obz.ajaxJson(url, params, function(resp){
		$("#mainTable").unmask();
		//$(".seletctProductLotGrid").empty();
		var dataList = resp.data;
		if(dataList.length>0){
			for(var i=0;i<dataList.length;i++){
				var _row = dataList[i];
				var trHtml = obz.dataTemplate4obj($("#select_product_table_tr_tpl").html(), _row);
				$(".seletctProductLotGrid").append(trHtml);
				bindSetTableAEvent();
			}
			
		}
	});
} 
var pageClick = function(pageNo) {
	searchProducts(pageNo);
}
var searchProducts = function(currPage){
	var params = {};
	//其他查询条件
	if(currPage){
		params.page = currPage;
	}
	//params.qname = qname;
	//params.type = $("#a_type_sel").val();
	//params.status = $("#a_status_sel").val();
	
	$("#mainTable").mask("加载中...");
	var url = obz.ctx + "/product/list";
	obz.ajaxJson(url, params, function(resp){
		$("#mainTable").unmask();
		var result = resp.data;
		$(".productLotGrid").empty();
		if(currPage){
			$("#pager").pager({ pagenumber:currPage, recordcount:result.totalRow, pagesize:result.pageSize, recordtext:'共 {0} 页, {1} 条记录', buttonClickCallback: pageClick });
		}else{
			$("#pager").pager({ recordcount:result.totalRow, pagesize:result.pageSize, recordtext:'共 {0} 页, {1} 条记录', buttonClickCallback: pageClick });	
		}
		var dataList = result.list;
		if(dataList.length>0){
			for(var i=0;i<dataList.length;i++){
				var _row = dataList[i];
				var trHtml = obz.dataTemplate4obj($("#product_table_tr_tpl").html(), _row);
				$(".productLotGrid").append(trHtml);
			}
			TBatch.checkCheckbox(function (chkAll){
				//$("#_sel_total_item").html(parseInt(TBatch.getCheckedCount()) + parseInt($("#_sel_total_item").text()));
				/* $("#mainTable input:checkbox.commchk").each(function(){
					if($(this).is(":checked") == true){
						//selectItem($(this));
					}else{
						//unSelectItem($(this));
					}
				}); */
			});
			TBatch.initCheckboxClick(function(resp){
				//selectItem($(resp));
			}, function(resp){
				//unSelectItem($(resp));
			});
		}else{
			$(".productLotGrid").append($("#table_noresult_tr_tpl").html());
		}
	});
}
searchProducts();
</script>
<!-- 选择的商品列表模板 -->
<script type="text/template" id="product_table_tr_tpl">
		<tr id="{id}" class="package">
			<td><input type="checkbox" class="commchk" id="checkbox_{id}" product_id="{id}" product_name="{name}" product_price="{price}" product_img="{img}" style="margin-right: 4px; vertical-align: middle;"/></td>
			<td>
			<ul class="js-picture-lists app-image-list"><li><img src="{img}" width="40px" height="40px"></li></ul>
            <p class="goods-title"><a class="new-window" href="javascript:void(0)" title="{name}">{name}</a></p>
			</td>
			<td><span class="label label-success">￥{price}</span></td>
            <td>{stock}</td>
		</tr>
</script>

<script type="text/template" id="select_product_table_tr_tpl">
		<tr id="{id}" class="package">
			<td>
			<ul class="js-picture-lists app-image-list"><li><img src="{img}" width="40px" height="40px"></li></ul>
            <p class="goods-title"><a class="new-window" href="javascript:void(0)" title="{name}">{name}</a></p>
			</td>
			<td><span class="label label-success">￥{price}</span></td>
            <td>{stock}</td>
            <td><a id="{id}" class="btn btn-success" href="javascript:void(0)">取消</a></td>
		</tr>
</script>
[/@layout]
<script>
Template.init("#menu-goods");
Template.initSecond("#menu-group-secd");
</script>
</body>
</html>